<template>
    <div class="s_container">
        <h1>{{cname}}</h1>
        <div>
            <div class="demo-input-suffix">
                <el-input
                        v-model="keyword"
                        placeholder="软件名称"
                        @change="filterSoft"
                >
                    <i slot="append" class="el-input__icon el-icon-search"/>
                </el-input>
            </div>
        </div>
        <el-card>
            <el-card shadow="hover" >
                <div slot="header">
                    <span>360.cn</span>
                </div>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>预览</span>
                    </div>
                    <div style="z-index: 9999">
                        <el-row>
                            <el-col :span="8">
                                <iscity></iscity>
                            </el-col>
                            <el-col :span="8">
                                <gender></gender>
                            </el-col>
                            <el-col :span="8">
                                <age></age>
                            </el-col>
                            <el-col :span="8">
                                <edu></edu>
                            </el-col>
                            <el-col :span="8">
                                <job></job>
                            </el-col>
                            <el-col :span="8">
                                <income></income>
                            </el-col>
                        </el-row>


                    </div>
                </el-card>
                <el-card shadow="hover" class="useCount">
                    <div slot="header" class="clearfix">
                        <span>使用统计</span>
                    </div>
                    <div>
                        <month/>
                    </div>
                </el-card>
                <el-card shadow="hover" class="useCount">
                    <div>
                        <location></location>
                    </div>
                </el-card>
            </el-card>
        </el-card>

    </div>
</template>

<script>
    import pie from '@/components/Charts/pie'
    import month from '@/views/sunwu/charts/month.vue'
    import day from '@/views/sunwu/charts/day.vue'
    import iscity from "@/views/sunwu/charts/iscity.vue";
    import gender from "@/views/sunwu/charts/gender.vue";
    import age from "@/views/sunwu/charts/age.vue";
    import edu from "@/views/sunwu/charts/edu.vue";
    import job from "@/views/sunwu/charts/job.vue";
    import income from "@/views/sunwu/charts/income.vue";
    import location from "@/views/sunwu/charts/location.vue";
    import {CompanySoftwareList} from "@/api/api.js";
    export default {
        name: 'Company', components: {
            pie,
            month,
            day,
            iscity,
            gender,
            age,
            edu,
            job,
            income,
            location
        },
        data() {
            return {
                cname:"",
                keyword: '',
                softs:[]
            }
        },
        async mounted() {
            this.cname=this.$route.params.cname;
            this.softs=await CompanySoftwareList("360.cn");
        }, methods: {
            filterSoft() {

            }
        }
    }
</script>

<style scoped>
    .useCount {
        z-index: 999;
    }
</style>
